<template>
  <div :style="{ height: '100%', width: '100%' }">
    <ReactX6Editor :editor="editor"/>
  </div>
</template>

<script setup lang="tsx">

import {createBranchNode, createEndNode, createFlowEdge, createFlowNode, createRenderNode, createStartNode, ReactX6Editor, useFlowEditor} from "../src";
import './main.scss';

const editor = useFlowEditor({
  onlyOneStartNode: true,
  operators: [
    {
      label: '选项一',
      icon: () => (<i class="iconfont icon-pay_wechat" style={{ height: '27px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}/>),
      handler: () => console.log('option 1...')
    }
  ]
});
editor.components.registry(createStartNode());
editor.components.registry(createFlowNode());
editor.components.registry(createBranchNode());
editor.components.registry(createEndNode());
editor.components.registry(createFlowEdge());
editor.components.registry(createRenderNode());

import('./flow.data.json').then(data => {editor.methods.update(data.default);});

editor.hooks.onCreateContextmenu.use(({ options, edge, node, type }) => {
  switch (type) {
    case 'node':
      options.push({
        label: '自定义node选项2',
        icon: () => <i class="iconfont icon-pay_zhifubao" style={{ padding: '0 4px' }}/>,
        handler: () => alert('自定义node选项2')
      });
      return;
    case 'edge':
      options.push({
        label: '自定义edge选项',
        icon: 'data',
        handler: () => alert('自定义edge选项')
      });
      return;
    case 'vertex':
      options.push({
        label: '自定义拐点选项',
        icon: 'data',
        handler: () => alert('自定义拐点选项')
      });
      return;
    case 'blank':
      options.push({
        label: '自定义白板选项',
        icon: 'data',
        handler: () => alert('自定义白板选项')
      });
      return;
  }
});
</script>

<style lang="scss">

</style>
